<template lang="html">
    <div id="index">
        <mt-videolist></mt-videolist>
        <!-- <mt-scoll></mt-scoll> -->
        <!-- 公告栏目 -->
        <section class="publicity">
            <div class="publicity-box">
                <div class="publicity-title">
                    名厨亮灶 请您监督
                </div>
                <div class="publicity-dynamic">
                    <dl>
                        <dt>
                                                 <img src="../../img/A.png" class="imgs">
                                             <!--    <img src="../img/A.png" class="imgs" v-if="this.dynamic=='优秀'">
                                              <img src="../img/B.png" class="imgs" v-if="this.dynamic=='良好'">
                                              <img src="../img/C.png" class="imgs" v-if="this.dynamic=='一般'">
                                              <img src="../img/D.png" v-if="this.dynamic=='整改中'">
                                              <img src="../img/E.png" v-if="this.dynamic=='未评级'"> -->
                                            </dt>
                        <dd>上年度综合等级</dd>
                    </dl>
                    <dl>
                        <dt>
                                                <img src="../../img/excellent.png">
                                              <!-- <img src="../img/excellent.png" v-if="this.Grade=='优秀'">
                                              <img src="../img/good.png" v-if="this.Grade=='良好'">
                                              <img src="../img/commonly.png" v-if="this.Grade=='一般'">
                                               <img src="../img/D.png" v-if="this.Grade=='整改中'">
                                               <img src="../img/E.png" v-if="this.Grade=='未评级'"> -->
                                              </dt>
                        <dd>本次检查动态等级</dd>
                    </dl>
                </div>
                <div class="publicity-standard">
                    <dl>
                        <dt><img src="../../img/excellent.png"></dt>
                        <dd class="excellent">A<span>(优秀)</span></dd>
                    </dl>
                    <dl>
                        <dt><img src="../../img/good.png"></dt>
                        <dd class="good">B<span>(良好)</span></dd>
                    </dl>
                    <dl>
                        <dt><img src="../../img/commonly.png"></dt>
                        <dd class="commonly">C<span>(一般)</span></dd>
                    </dl>
                </div>
            </div>
        </section>
      
        <section class="">
            <div class="box">
                <dl>
                    <dt class="current tabbg"><img src="../../img/icon1.png">单位资质 <em><img src="../../img/right.png"></em></dt>
                  
                    <dd style="display: block;">
                        <div class="Unit_qualiy">
                            <ul>
                                <li class="unit_title">企业名称：<label>{{this.InfosData.name}}</label></li>
                                <li>生产地址：<label>{{this.InfosData.businessAddress}}</label></li>
                                <li>许可证号：<label>{{this.info.code}}</label></li>
                                <li>发证机关：<label>{{this.info.gov}}</label></li>
                                <li>核定经营项目：<label>{{this.info.beProject}}</label></li>
                                <li>日常监管责任机构：<label>{{this.info.govDepartmentname}}</label></li>
                                <li>日常监管责任人员：<label>{{this.info.institutionPersonName}}</label></li>
                            </ul>
                        </div>
                    </dd>
                   
                </dl>
                <dl>
                    <dt class="tabbg2"  @click="clicks(section)"><img src="../../img/icon2.png">健康证公示<em><img src="../../img/right.png"></em></dt>
                    <dd>
                        <ul class="Health_certificate">
                            <li v-for="item of PersonData">
                                <div class="Health_img">
                                    <img src="../../img/code.jpg">
                                </div>
                                <div class="Health_content">
                                    <p>
                                        姓名： 性别：
                                    </p>
                                    <p>健康证号：</p>
                                    <P>许可证号：</P>
                                    <p>发证机关：</p>
                                    <p>有效截止日期：</p>
                                </div>
                            </li>
                        </ul>
                    </dd>
                </dl>
                <dl>
                    <dt class="tabbg3"  @click="clicks(index)"><img src="../../img/icon3.png">添加剂公示<em><img src="../../img/right.png"></em></dt>
                    <dd>
                        <ul class="Additive">
                            <li v-for='item of AdditivesData'>
                                <div class="Additive_content">
                                    <p>
                                        食品添加剂：{{item.manufacture}}
                                    </p>
                                    <p>备案号{{item.foodAdditives.recordNumber}}</p>
                                    <P>规格：{{item.standard}}</P>
                                    <p>生产厂家：{{item.manufacture}}</p>
                                    <p>添加剂添加量(规定量)：{{item.specifiedAmount}}</p>
                                    <p>添加剂使用量(使用量)：{{item.actualAmount}}</p>
                                    <p>使用日期:{{item.verificationDate|time}}</p>
                                </div>
                            </li>
                        </ul>
                    </dd>
                </dl>
                <dl>
                    <dt class="tabbg4"  @click="clicks(index)"><img src="../../img/icon4.png">食品安全相关知识<em><img src="../../img/right.png"></em></dt>
                    <dd>
                        <ul class="Food_Safety">
                            <li v-for='item of FoodSafetyData' :key='item.unid'>
                                 <router-link :to='{name: "Notedetail"}'>
                                    <div class="Food_Safety_content">
                                        <div class="Food_Safety_img">
                                            <img :src="item.newsPicture.serverFullPath">
                                        </div>
                                        <div class="Food_Safety_text">
                                            <article>
                                                {{item.title}}
                                            </article>
                                            <time>{{item.versionDate}}</time>
                                        </div>
                                    </div>
                                </router-link>
    
                            </li>
                        </ul>
                    </dd>
                </dl>
            </div>
        </section>
    
        <!--  <section>
                                        <mt-navbar v-model="selected">
                                            <mt-tab-item id='tab-container1'>
                                                <font class="font_1">公告栏目</font>
                                            </mt-tab-item>
                                            <mt-tab-item id='tab-container2'>
                                                <font class="font_1">资质证明</font>
                                            </mt-tab-item>
                                            <mt-tab-item id='tab-container3'>
                                                <font class="font_1">商家信息</font>
                                            </mt-tab-item>
                                            <mt-tab-item id='tab-container4'>
                                                <font class="font_1">评价信息</font>
                                            </mt-tab-item>
                                        </mt-navbar>
                                        <div class="page-tab-container">
                                            <mt-tab-container class="page-tabbar-tab-container" v-model="selected" swipeable>
                                                <mt-tab-container-item id="tab-container1">
                                                 
                                                </mt-tab-container-item>
                                                <mt-tab-container-item id="tab-container2">
                                                 
                                                    <div class="safe-view">
                                                        <ul class="qualifications">
                                                            <li>
                                                                <p>营业执照</p>
                                                                <div class="imgbox">
                                                                    <img src="../../../static/img/tool.png">
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <p>许可证明</p>
                                                                <div class="imgbox">
                                                                    <img src="../../../static/img/tool2.png">
                                                                </div>
                                                            </li>
                                                        </ul>
                                                        <div class="Permitbox">
                                                            <p>许可证明</p>
                                                            <ul class="Permititem">
                                                                <li>
                                                                    <img src="../../../static/img/tool2.png">
                                                                </li>
                                                                <li>
                                                                    <img src="../../../static/img/tool2.png">
                                                                </li>
                                                                <li>
                                                                    <img src="../../../static/img/tool2.png">
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </mt-tab-container-item>
                                                <mt-tab-container-item id="tab-container3">
                                                   
                                                    <div class="safe-view">
                                                        <div class="business">
                                                            <section class="shop_statu_detail">
                                                                <div class="res-well"></div>
                                                                <div class="check_date">
                                                                    <p><span data-v-ca49b092="">某某企业</span></p>
                                                                    <p><span data-v-ca49b092="">商家概况</span></p>
                                                                </div>
                                                            </section>
                                                            <p>商家电话</p>
                                                            <p>商家地址</p>
                                                        </div>
                                                    </div>
                                                </mt-tab-container-item>
                                                <mt-tab-container-item id="tab-container4">
                                                 
                                                    <div class="safe-view">
                                                        <p class="mores"><router-link :to='{name: "Commentlist"}'>查看更多</router-link></p>
                                                        <ul class="rating_list_ul">
                                                            <li class="rating_list_li"><img src="http://test.fe.ptdev.cn/elm/elmlogo.jpeg" class="user_avatar">
                                                                <section class="rating_list_details">
                                                                    <header>
                                                                        <section class="username_star">
                                                                            <p class="username">4*******b</p>
                                                                        </section> <time class="rated_at">2017-02-10</time>
                                                                        </header>
                                                                    <article>
                                                                        真心是不错的真心是不错的真心是不错的真心是不错的真心是不错的
                                                                    </article>    
                                                                </section>
                                                            </li>
                                                            <li class="rating_list_li"><img src="http://test.fe.ptdev.cn/elm/elmlogo.jpeg" class="user_avatar">
                                                                <section class="rating_list_details">
                                                                    <header>
                                                                        <section class="username_star">
                                                                            <p class="username">4*******b</p>
                                                                        </section> <time class="rated_at">2017-02-10</time></header>
                                                                        <article>
                                                                       专业水军
                                                                    </article>  
                                                                </section>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </mt-tab-container-item>
                                            </mt-tab-container>
                                        </div>
                                
                                    </section>
                                    -->
        <mt-footer></mt-footer>
    </div>
</template>

<script>
    $(function() {
        $(".box dt").on("click", function() {
            var img = $(this).find("em");
            var con = $(this).siblings("dd");
            var sib = $(this).parent().siblings();
    
            con.slideToggle();
            $(this).toggleClass("current");
            img.toggleClass("currenticon");
    
            sib.find("dd").slideUp();
            sib.find("dt").removeClass("current");
            sib.find("em").removeClass("currenticon");
    
    
        });
    });
    import axios from 'axios';
    import Video from '@/components/videolist'
    import Scoll from '@/components/notescoll'
    import Footer from '@/components/footer'
    import {
        TabContainer,
        TabContainerItem,
        Navbar,
        TabItem,
    } from 'mint-ui';
    export default {
        components: {
            'mt-videolist': Video,
            'mt-tab-container': TabContainer,
            'mt-tab-container-item': TabContainerItem,
            'mt-navbar': Navbar,
            'mt-tab-item': TabItem,
            'mt-scoll': Scoll,
            'mt-footer': Footer
        },
        data() {
            return {
                selected: 'tab-container1',
            };
        },
        //方法
        methods: {
    
        }
    }
</script>

<style lang="scss" scoped>
    .tips {
        padding: 20px 0px 0px 0px;
        color: #d4d7de;
        text-align: center;
        img {
            width: 1.5rem;
            height: 1.5rem;
            vertical-align: middle;
        }
        label {
            margin-left: 5px;
            font-size: .95rem;
            vertical-align: middle;
        }
    }
    
    .publicity {
        width: 95%;
        background: #0067b6;
        overflow: hidden;
        position: relative;
        margin: 10px auto;
        .publicity-box {
            .publicity-title {
                text-align: center;
                color: #ffff01;
                width: 100%;
                margin: auto;
                background: #3266ff;
                font-size: 1.20rem;
                padding: 10px 0px;
                font-weight: 500;
            }
            .publicity-dynamic {
                display: -webkit-flex;
                display: flex;
                justify-content: center;
                align-items: center;
                dl {
                    margin-top: 0;
                    width: 50%;
                    margin-bottom: 5px;
                }
                dt,
                dd {
                    margin: 0;
                    text-align: center;
                    color: #fff;
                    font-size: 1rem;
                    padding: 3px 0px;
                }
                dt {
                    width: 4rem;
                    height: 4rem;
                    margin: auto;
                    display: flex;
                    margin-bottom: 5px;
                    align-items: flex-end;
                    justify-content: center;
                    img {
                        width: 85%
                    }
                }
            }
        }
    }
    
    .publicity-standard {
        display: -webkit-flex;
        /* Safari */
        display: flex;
        justify-content: center;
        align-items: center;
        display: -webkit-flex;
        /* Safari */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px 0px;
        dl {
            width: 33.3%;
            margin: 0;
        }
        dt,
        dd {
            margin: 0;
            text-align: center;
            font-size: 1.1rem;
            padding: 3px 0px;
            span {
                margin-left: 10px;
                font-size: .9rem;
                vertical-align: baseline
            }
        }
        dt {
            width: 2.5rem;
            height: 2.5rem;
            margin: auto;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            img {
                width: 85%;
            }
        }
    }
    
    .imgs {
        width: 65% !important;
    }
    
    .excellent {
        color: #20f129;
    }
    
    .good {
        color: #ffff00;
    }
    
    .commonly {
        color: #fb0103;
    }
    
    
    /**/
    
    .box {
        margin: 10px auto 55px;
    }
    
    .box dl {
        margin: 0
    }
    
    .box dt {
        padding: 10px 30px;
        cursor: pointer;
        position: relative;
        font-size: .95rem;
        color: #fff;
        img {
            width: 23px;
            vertical-align: middle;
            margin-right: 10px;
        }
    }
    
    .box dt em img {
        width: 16px;
        margin-top: 13px;
    }
    
    .tabbg {
        background: -webkit-linear-gradient(#a5adf7, #7e87d1);
        background: -o-linear-gradient(#a5adf7, #7e87d1);
        background: -moz-linear-gradient(#a5adf7, #7e87d1);
        background: linear-gradient(#a5adf7, #7e87d1);
    }
    
    .tabbg2 {
        background: -webkit-linear-gradient(#52b8e4, #0b87c5);
        background: -o-linear-gradient(#52b8e4, #0b87c5);
        background: -moz-linear-gradient(#52b8e4, #0b87c5);
        background: linear-gradient(#52b8e4, #0b87c5);
    }
    
    .tabbg3 {
        background: -webkit-linear-gradient(#6fa0de, #597ec1);
        background: -o-linear-gradient(#6fa0de, #597ec1);
        background: -moz-linear-gradient(#6fa0de, #597ec1);
        background: linear-gradient(#6fa0de, #597ec1);
    }
    
    .tabbg4 {
        background: -webkit-linear-gradient(#55d48b, #2cb165);
        background: -o-linear-gradient(#55d48b, #2cb165);
        background: -moz-linear-gradient(#55d48b, #2cb165);
        background: linear-gradient(#55d48b, #2cb165);
    }
    
    .box dt.current {
        color: #fff;
        font-weight: bold;
    }
    
    .box dt.current em {
        background-position: bottom;
    }
    
    .box dt:last-child {
        border-bottom: none;
    }
    
    .box dd {
        padding: 10px;
        line-height: 20px;
        display: none;
        background: #eef7f5;
        margin: 0px;
    }
    
    .currenticon img {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        /* IE 9 */
        -moz-transform: rotate(180deg);
        /* Firefox */
        -webkit-transform: rotate(180deg);
        /* Safari 和 Chrome */
        -o-transform: rotate(180deg);
    }
    
    em {
        display: inline-block;
        float: right;
        //	background: url(data/attachment/album/201512/16/174534f239t9uk82p4te4n.png) no-repeat;
        width: 33px;
        height: 33px;
        position: absolute;
        top: 0;
        right: 10px;
        background-position: top;
    }
</style>
